<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <title>投票系统</title>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        body{
            margin:0;
            padding:0;
            font-family: Lato,Helvetica,Arial,sans-serif;
            font-size: 14px;
            line-height: 1.72222;
            color: #34495e;
            background-color: #fff;
        }
        .wrap {
            min-width: 100%;
            position: absolute;
            background: #eff3f6 bottom;
            min-height: 100%;
            overflow: hidden;
        }
        .left{
            margin-left:0px;
            position: absolute;
            box-sizing: border-box;
            width: 200px;
            height: 100%;
            background: #4d5e70 bottom;
        }
        .logoDiv{
            padding-top: 20px;
            padding-bottom: 20px;
            height: 70px;
            background-color: #354457;
            font-size: 17px;
            color: #fff;
            vertical-align: bottom;
        }
        .logoTitle{
            margin-left:15px;
            line-height: 1.7;
        }
        .menu-title {
            margin-left:15px;
            color: #828e9a;
            padding-top: 10px;
            padding-bottom: 10px;
            font-size: 14px;
            font-weight: bold;
        }
        .menu-item {
            padding-left:15px;
            line-height: 40px;
            height: 40px;
            color: #aab1b7;
            cursor: pointer;
        }
        .menu-item-active {
            background-color: #3d4e60;
            border-right: 4px solid #647f9d;
            color: #fff;
        }
        .right{
            box-sizing: border-box;
            float: left;
            box-sizing: border-box;
            padding-left: 200px;
            overflow-y: overlay;
            overflow-x: hidden;
            clear: both;
            color: #717592;
            min-width: 100%;
            min-height: 500px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <!-- 左边内容 -->
    <div id="left" class="left">
        <div id="logoDiv" class="logoDiv">
            <p id="logoTitle" class="logoTitle">
                <img id="logo" alt="管理员" src="/img/edc.jpg"
                     style="height: 28px; padding-right: 5px;vertical-align: middle;">
                <span style="font-size:15px;">©锡纸炎投票系统</span>
            </p>
        </div>

        <div shiro:hasPermission="user:vote">
            <div class="menu-title">普通用户</div>
            <div class="menu-item" href="#one" data-toggle="tab">
                －进行投票
            </div>
            <div class="menu-item" href="#two" data-toggle="tab">
                －申请出题人发送邮箱祝福
            </div>

        </div>

        <div shiro:hasPermission="user:author">
            <div class="menu-title">出题人</div>
            <div class="menu-item" href="#three" data-toggle="tab">
                －出题目
            </div>
        </div>

        <div shiro:hasPermission="user:agreeAuthor">
            <div class="menu-title">超级管理员</div>
            <div class="menu-item" href="#four" data-toggle="tab">
                －同意申请成为出题人
            </div>
            <div class="menu-item" href="#five" data-toggle="tab">
                －发送邮箱祝福
            </div>
        </div>
           <a class="menu-title" th:href="@{/logout}">注销</a>
    </div>
    <!-- 右边内容 -->
    <div id="right" class="tab-content right">
        <div id="one" class="tab-pane active">
            <iframe id="oneIfm" frameborder="no" border="0" style="width:100%;height:1000px;"
                    th:src="@{/user/voteList/(nowPage=0)}" scrolling="no" onload="changeFrameHeight()">
            </iframe>
        </div>
        <div id="two" class="tab-pane">
            <iframe id="twoIfm" frameborder="no" border="0" style="width:100%;height:1000px;"
                    th:src="@{/user/ApplyAuthor}" scrolling="no" onload="changeFrameHeight()">
            </iframe>

        </div>

        <div id="three" class="tab-pane">
            <iframe id="threeIfm" frameborder="no" border="0" style="width:100%;height:1000px;"
                    src="/user/addTopic/to" scrolling="no" onload="changeFrameHeight()">
            </iframe>
        </div>
        <div id="four" class="tab-pane">
            <iframe id="fourIfm" frameborder="no" border="0" style="width:100%;height:1000px;"
                    th:src="@{/user/AgreeAuthor/to(nowApplyAuthorPage=0)}" scrolling="no" onload="changeFrameHeight()">
            </iframe>
        </div>
        <div id="five" class="tab-pane">
            <iframe id="fiveIfm" frameborder="no" border="0" style="width:100%;height:1000px;"
                  th:src="@{/user/sendEmail/to(nowUserEmailPage=0)}"   scrolling="no" onload="changeFrameHeight()">
            </iframe>
        </div>
    </div>
</div>
</body>
<script>
    $(function() {
        $(".menu-item").click(function() {
            $(".menu-item").removeClass("menu-item-active");
            $(this).addClass("menu-item-active");
            var itmeObj = $(".menu-item").find("img");
            itmeObj.each(function() {
                var items = $(this).attr("src");
                items = items.replace("_grey.png", ".png");
                items = items.replace(".png", "_grey.png")
                $(this).attr("src", items);
            });
            var attrObj = $(this).find("img").attr("src");;
            attrObj = attrObj.replace("_grey.png", ".png");
            $(this).find("img").attr("src", attrObj);
        });
    });
    function changeFrameHeight(){
        var ifm=document.getElementById("fourIfm");
        ifm.height = document.documentElement.clientHeight;
    }
    window.onresize=function(){
        changeFrameHeight();
    }
</script>
</html>